<template>
    <div class="minishop-msxq  ptb15">
        
        <template v-if="house">
        <div class="plr15">
        <div class="photo">
            <img class="" :src="house.images[curImg]" alt="">
        </div>
        <div class="mt15">
            <div class="scroll ">
                <div class="inner kitbox pb10">
                <div @click="curImg = i" class="item " v-for="(item, i) in house.images" :key="i" >
                    <img class="photo" :src="item" alt="">
                </div>
                </div>
            </div>
        </div>
        <div class="title kitbox pt15">
            <div class="flex1 c-000 f-bold fs-15">{{house.title}}</div>
            <div class="pt5 share-wrap">
                <button data-name="shareBtn" class="shareBtn" open-type="share">转发</button>
                <img class="share" src="/static/images/share-c.png" alt="">
            </div>
        </div>
        <div class="fs-12 c-9e9e9e pt7">
            {{house.address}}
        </div>

        <div class="kitbox fs-15 c-999 pt20">
            <div @click="showType=1" class="" :class="{'c-c9994a': showType==1}">概况</div>
            <div @click="showType=2" class="ml25" :class="{'c-c9994a': showType==2}">房型</div>
            <div class="fs-12 c-c9994a flex1 tr pt2"><span @click="callMobile">联系我们</span></div>
        </div>
        </div>
        <div class="  pt20 plr15 " v-show="showType==1">
            <div v-html="house.detail"></div>
        </div>

        <div class="plr15" v-show="showType==2">
            <div @click="link('/index/xzrq?startDate='+ startDate +'&endDate='+ endDate)" class="kitbox mt13 fs-12 c-fff date-section plr12">
                <div class="flex1 pt5">
                    <div>入住</div>
                    <div class="pt2">{{startDate}} {{startWeek}}</div>
                </div>
                <div class="pt16">
                    <div class="icon">共{{days}}晚</div>
                </div>
                <div class="tr flex1 pt5">
                    <div>离店</div>
                    <div class="pt2">{{endDate}} {{endWeek}}</div>
                </div>
            </div>
            <div class="list pt20 pb15">
                <div  class="item pb10"  v-for="(item,i) in roomList" :key="i" @click="link('/pages/project2/spxq?id='+ item.prdId)">
                    <div @click="link('/index/msxqCheck?id='+ item.roomId+ '&houseId='+ id + '&placeId='+ placeId + '&startDate='+ startDate +'&endDate='+ endDate)" class="inner">
                        <div class="photo">
                            <img :src="item.cover" alt="">
                        </div>
                        <div class="kitbox plr12 pt15">
                            <div class="flex1 f-bold fs-15 c-121212">{{item.title}}</div>
                            <div class="fs15 f-bold c-c9a35d">押金：{{item.depositStr}}</div>
                        </div>
                        <div class="tags pt12 plr12">
                            <van-tag plain>会员免费</van-tag>
                        </div>
                        <div class="pt12 pb13 kitbox plr12">
                            <div class="flex1 pt2">
                                <img mode="widthFix" class="v-middle w12" src="/static/images/xz.png" alt="">
                                <span class="v-middle ml6 c-858585 fs-12">限住{{item.people}}人</span>

                                <img mode="widthFix" class="v-middle w15 ml15" src="/static/images/chuang.png" alt="">
                                <span class="v-middle ml6 c-858585 fs-12">{{item.bed}}张床</span>
                            </div>
                            <div><van-button  type="primary" color="#cda058" size="small">立即预定</van-button></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </template>
    </div>
</template>

<script>
import houseApi from "@/api/api-house";
import roomApi from "@/api/api-room";
import placeApi from "@/api/api-place";
import moment from '@/plugins/utils/moment.js'
export default {
    data () {
        var weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
        var next = moment().add(1, 'days')

        var day = moment().format('YYYY-MM-DD'),
            week =  weekday[moment().weekday()]
        
        return {
            id: "",
            house: undefined,
            curImg: 0,
            roomList: [],
            startDate: day,
            endDate: next.format('YYYY-MM-DD'),
            startWeek: week,
            endWeek: weekday[next.weekday()],
            days: 1,
            showType: 1,
            weekday,

            placeId: "",
        }
    },
    watch: {
        '$store.getters.logined': {
            handler(n, o){
                if(n){
                    
                }
            }
        },
    },
    components: {
        
    },
    onLoad(options){
        wx.removeStorageSync("search-mslb")
        this.id = options.id || ""
        this.placeId = options.placeId || ""
        this.showType = options.showType || 1
    },
    mounted () {
        this.initPage()
    },
    onShow(){
        if(wx.getStorageSync("search-mslb") == 1){
            this.startDate = wx.getStorageSync("search-mslb-startDate") || ""
            this.endDate = wx.getStorageSync("search-mslb-endDate") || ""
            this.startWeek = this.weekday[moment(this.startDate).weekday()] 
            this.endWeek = this.weekday[moment(this.endDate).weekday()]
            this.days = moment(this.endDate).diff(moment(this.startDate), 'days');  
            this.ListRoom()   
        }
        wx.removeStorageSync("search-mslb")
        if(this.placeId){
            wx.setNavigationBarTitle({
                title: "景点介绍"
            })
        }
        
    },
    methods: {
        initPage(){
            if(this.id){
                this.GetHouse()
            } else {
                this.GetPlace()
            }
            this.ListRoom()
        },
        GetHouse(){
            houseApi.GetHouse({
                houseId: this.id
            }).then(data => {
                var arr = data.result.detail.split("\<img")
                arr.forEach((v, i)=>{
                    if(v.indexOf('src')!=-1){
                        if(v.indexOf('style')!=-1 && v.indexOf('style')< v.indexOf('>')){
                            arr[i] = v.replace('style="', 'style="max-width:100%;height:auto;').replace("style='", "style='max-width:100%;height:auto;")
                        } else {
                            arr[i] = 'style="max-width:100%;height:auto" ' +arr[i]
                        }
                    }
                })
                data.result.detail = arr.join('<img ')
                this.house = data.result
            })
        },
        GetPlace(){
            placeApi.GetPlace({
                placeId: this.placeId
            }).then(data => {
                var arr = data.result.detail.split("\<img")
                arr.forEach((v, i)=>{
                    if(v.indexOf('src')!=-1){
                        if(v.indexOf('style')!=-1 && v.indexOf('style')< v.indexOf('>')){
                            arr[i] = v.replace('style="', 'style="max-width:100%;height:auto;').replace("style='", "style='max-width:100%;height:auto;")
                        } else {
                            arr[i] = 'style="max-width:100%;height:auto" ' +arr[i]
                        }
                    }
                })
                data.result.detail = arr.join('<img ')
                this.house = data.result
            })
        },
        ListRoom(){
            roomApi.ListRoom({
                keyword: "",
                houseId: this.id,
                placeId: this.placeId,
                start_date: this.startDate,
                end_date: this.endDate,
                pageIndex: 1,
                pageSize: 999
            }).then(data => {
                data.result.List.forEach(v=>{
                    v.depositStr = v.deposit.toFixed(2)
                })
                this.roomList = data.result.List
            })
        },
        callMobile(){
            wx.makePhoneCall({
                phoneNumber: this.house.mobile
            })
        },
    },
    onShareAppMessage( options ){
        var that = this;
        // 设置菜单中的转发按钮触发转发事件时的转发内容
        var shareObj = {
            title: this.house.title,// 默认是小程序的名称(可以写slogan等)
            path: '/pages/index/msxq?id='+ (this.id||"") + '&placeId='+ (this.placeId||""),// 默认是当前页面，必须是以‘/’开头的完整路径
            imageUrl: "",//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
            success: function(res){
                // 转发成功之后的回调
                if(res.errMsg == 'shareAppMessage:ok'){
                    wx.showToast({
                        title: "分享成功",
                        icon: "success",
                        duration: 2000
                    })
                }
            },
            fail: function() {
                // 转发失败之后的回调
                if(res.errMsg == 'shareAppMessage:fail cancel'){
                    // 用户取消转发
                
                }else if(res.errMsg == 'shareAppMessage:fail'){
                    // 转发失败，其中 detail message 为详细失败信息
                    wx.showToast({
                        title: "分享失败",
                        icon: "success",
                        duration: 2000
                    })
                }
            },
            complete: function () {
                
            }
        };
        // 来自页面内的按钮的转发
        if( options.from == 'button' ){
            　
        }
        // 返回shareObj
        return shareObj;
    },
}
</script>

<style  lang="scss">
@import './scss/msxq.scss';
</style>
